<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>医生管理系统</title>

    <!-- 引入 Bootstrap CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">

    <!-- 引入 Font Awesome 图标 -->
    <link href="/css/all.min.css" rel="stylesheet">

    <style>
        body {
            padding-top: 2rem;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 1200px;
        }
        .action-buttons button {
            margin-right: 5px;
        }
        .status-badge {
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        .status-active {
            background: rgba(40, 167, 69, 0.1);
            color: #28a745;
        }
        .status-inactive {
            background: rgba(220, 53, 69, 0.1);
            color: #dc3545;
        }
        .table-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        .header-container {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            margin-bottom: 2rem;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="header-container">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h2 class="mb-0"><i class="fas fa-user-md me-2"></i>医生管理</h2>
                <p class="text-muted mb-0">管理医院医生信息</p>
            </div>
            <div>
                <button class="btn btn-primary me-2" onclick="location.href='/admins/addDoctor'">
                    <i class="fas fa-plus me-1"></i>添加医生
                </button>
                <button class="btn btn-outline-secondary" id="refreshBtn">
                    <i class="fas fa-sync-alt me-1"></i>刷新
                </button>
            </div>
        </div>
    </div>

    <!-- 医生列表表格 -->
    <div class="table-container">
        <table class="table table-hover mb-0">
            <thead class="table-light">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>所属科室</th>
                <th>职称</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="doctorTableBody">
            <tr>
                <td colspan="6" class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 引入 jQuery 和 Bootstrap JS -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>

<script>
    $(document).ready(function () {
        // 获取医生数据并渲染表格
        function loadDoctors() {
            $.get('/admins/getAllDoctor', function (data) {
                const tbody = $('#doctorTableBody');
                tbody.empty();

                if (!data || data.length === 0) {
                    tbody.append('<tr><td colspan="6" class="text-center py-4">暂无医生数据</td></tr>');
                    return;
                }

                data.forEach(doctor => {
                    const row = `
                        <tr>
                            <td>${doctor.id}</td>
                            <td>
                                <div class="fw-bold">${doctor.name}</div>
                                <small class="text-muted">ID: ${doctor.id}</small>
                            </td>
                            <td>${doctor.departmentName || '未知科室'}</td>
                            <td>${doctor.title || '-'}</td>
                            <td>
                                <span class="status-badge ${doctor.status ? 'status-active' : 'status-inactive'}">
                                    ${doctor.status ? '启用' : '禁用'}
                                </span>
                            </td>
                            <td class="action-buttons">
                                <button class="btn btn-sm btn-warning edit-btn" data-id="${doctor.id}">
                                    <i class="fas fa-edit me-1"></i>修改
                                </button>
                                <button class="btn btn-sm btn-danger delete-btn" data-id="${doctor.id}">
                                    <i class="fas fa-trash-alt me-1"></i>删除
                                </button>
                            </td>
                        </tr>
                    `;
                    tbody.append(row);
                });
            }).fail(function () {
                $('#doctorTableBody').append(`
                    <tr>
                        <td colspan="6" class="text-center text-danger py-4">
                            <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                            <div>数据加载失败，请重试</div>
                        </td>
                    </tr>
                `);
            });
        }

        // 页面加载时自动获取医生列表
        loadDoctors();

        // 绑定刷新按钮事件
        $('#refreshBtn').click(function() {
            loadDoctors();
        });

        // 绑定编辑按钮事件
        $(document).on('click', '.edit-btn', function() {
            const id = $(this).data('id');
            window.location.href = '/admins/updateDoctor?id=' + id;
        });

        // 绑定删除按钮事件
        $(document).on('click', '.delete-btn', function() {
            const id = $(this).data('id');
            if (confirm('确认删除该医生？此操作不可恢复！')) {
                $.ajax({
                    url: '/admins/deleteDoctor/' + id,
                    type: 'DELETE',
                    success: function () {
                        alert('删除成功');
                        loadDoctors();
                    },
                    error: function () {
                        alert('删除失败，请重试');
                    }
                });
            }
        });
    });
</script>

</body>
</html>